<template>
	<tm-bottomnavigation :list="tabBarList" @change="change" bottom="110rpx" position='bottom'></tm-bottomnavigation>
</template>

<script>
	export default {
		data() {
			// 页面数据变量
			return {
				tabBarList: [{
					icon: 'icon-user-fill', //【必填】可以是图标名称或者图片地址。
					noIcon: '', //【非必填】未选中时的图标，不提供默认使用相同的icon图标
					value: '首页', //【非必填】底部文字
					iconSize: 38, //【非必填】图标大小
					fontSize: 20, //【非必填】文字大小
					showDot: false, //【非必填】是否显示角标。启用为true,下面的dot才起作用。
					// custom: true, //开启底部凸起样式
					customColor: 'yellow', //凸起后的背景颜色
					customFontColor: 'white', //凸起后的图标颜色。
					dot: {
						dot: false, //【非必填】是否显示点。如果是点，则不显示Num
						num: "", //【非必填】是否显示数字。
						ico: "", //【非必填】是否显示图标，优先级高于dot,num.
						color: '', //角标的背景主题色。如果不提供，将使用iconColor主题。
					},
					path: '/pages/tabBar/index', //【非必填】页面链接，如果提供此字段和值，将会打开指定的页面。比如：/pages/index/index
					openType: 'switchTab', //默认：switchTab，可选打开方式有：switchTab、redirect、reLaunch、navigateBack、navigate
				}, {
					icon: 'icon-user-fill', //【必填】可以是图标名称或者图片地址。
					noIcon: '', //【非必填】未选中时的图标，不提供默认使用相同的icon图标
					value: '社区', //【非必填】底部文字
					iconSize: 38, //【非必填】图标大小
					fontSize: 20, //【非必填】文字大小
					showDot: false, //【非必填】是否显示角标。启用为true,下面的dot才起作用。
					// custom: true, //开启底部凸起样式
					customColor: 'yellow', //凸起后的背景颜色
					customFontColor: 'white', //凸起后的图标颜色。
					dot: {
						dot: false, //【非必填】是否显示点。如果是点，则不显示Num
						num: "", //【非必填】是否显示数字。
						ico: "", //【非必填】是否显示图标，优先级高于dot,num.
						color: '', //角标的背景主题色。如果不提供，将使用iconColor主题。
					},
					path: '/pages/tabBar/community', //【非必填】页面链接，如果提供此字段和值，将会打开指定的页面。比如：/pages/index/index
					openType: 'switchTab', //默认：switchTab，可选打开方式有：switchTab、redirect、reLaunch、navigateBack、navigate
				}, {
					icon: 'icon-user-fill', //【必填】可以是图标名称或者图片地址。
					noIcon: '', //【非必填】未选中时的图标，不提供默认使用相同的icon图标
					value: '消息', //【非必填】底部文字
					iconSize: 38, //【非必填】图标大小
					fontSize: 20, //【非必填】文字大小
					showDot: false, //【非必填】是否显示角标。启用为true,下面的dot才起作用。
					// custom: true, //开启底部凸起样式
					customColor: 'yellow', //凸起后的背景颜色
					customFontColor: 'white', //凸起后的图标颜色。
					dot: {
						dot: false, //【非必填】是否显示点。如果是点，则不显示Num
						num: "", //【非必填】是否显示数字。
						ico: "", //【非必填】是否显示图标，优先级高于dot,num.
						color: '', //角标的背景主题色。如果不提供，将使用iconColor主题。
					},
					path: '/pages/tabBar/message', //【非必填】页面链接，如果提供此字段和值，将会打开指定的页面。比如：/pages/index/index
					openType: 'switchTab', //默认：switchTab，可选打开方式有：switchTab、redirect、reLaunch、navigateBack、navigate
				}, {
					icon: 'icon-user-fill', //【必填】可以是图标名称或者图片地址。
					noIcon: '', //【非必填】未选中时的图标，不提供默认使用相同的icon图标
					value: '我的', //【非必填】底部文字
					iconSize: 38, //【非必填】图标大小
					fontSize: 20, //【非必填】文字大小
					showDot: false, //【非必填】是否显示角标。启用为true,下面的dot才起作用。
					// custom: true, //开启底部凸起样式
					customColor: 'yellow', //凸起后的背景颜色
					customFontColor: 'white', //凸起后的图标颜色。
					dot: {
						dot: false, //【非必填】是否显示点。如果是点，则不显示Num
						num: "", //【非必填】是否显示数字。
						ico: "", //【非必填】是否显示图标，优先级高于dot,num.
						color: '', //角标的背景主题色。如果不提供，将使用iconColor主题。
					},
					path: '/pages/tabBar/mine', //【非必填】页面链接，如果提供此字段和值，将会打开指定的页面。比如：/pages/index/index
					openType: 'switchTab', //默认：switchTab，可选打开方式有：switchTab、redirect、reLaunch、navigateBack、navigate
				}],
			}
		},

		// 函数
		methods: {
			change(e) {
				console.log(e);
				// vk.switchTab(e.item.path);
			}
		},

	}
</script>
<style lang="scss" scoped>


</style>
